<script setup>
  // 导⼊ todo 样式 
  import './styles/index.css'
  import {ref, computed} from "vue"
  
  // 代办任务列表 
  const todoList = ref([
    { id: 321, name: '吃饭', finished: false },
    { id: 666, name: '睡觉', finished: true },
    { id: 195, name: '打⾖⾖', finished: false }
  ])
  
  // 新任务
  const todo = ref("")

  // 任务个数
  const todoCount = computed(() => {
    return todoList.value.length
  })

  // 新增任务
  const onAdd = () => {
    // 非空校验
    if(!todo.value) {
      // 错误提示
      return alert("任务不能为空！")
    } else {
    // 添加
    todoList.value.push({
      id: Date.now(),
      name: todo.value,
      finished: false
    })
    // 表单置空
    todo.value = ""
    }
  }

  // 删除单个任务
  const onDelete = (i) => {
    // 提示
    if(window.confirm("确认删除该任务吗？")) {
      // 删除
      todoList.value.splice(i, 1)
    }
  }

  // 删除所有任务
  const onClear = () => {
    // 提示
    if(window.confirm("确认删除该任务吗？")) {
      // 清空
      todoList.value = ""
    }
  }
</script>

<template>
  <section clsss="todoapp">

    <header class="header">
      <h1>⽐特⼈记事本</h1>
      <input
      placeholder="请输⼊任务"
      class="new-todo" 
      v-model.trim="todo"
      @keydown.enter="onAdd"/>
      <button class="add"
      @click="onAdd">添加任务</button>
    </header>

    <section class="main">
      <ul class="todo-list">
        <li class="todo" 
        v-for="item, index in todoList" :key="item.id"
        :class="{'completed': item.finished}">
          <div class="view">
            <span class="index">{{ index + 1 }}</span>
            <label>{{ item.name }}</label>
            <button class="destroy"
            @click="onDelete(index)"></button>
          </div>
        </li>
      </ul>

    </section>
      <footer class="footer">
        <span class="todo-count">合 计: <strong>{{ todoCount }}</strong></span>
        <button class="clear-completed"
        @click="onClear">清空任务</button>
      </footer>

  </section>
</template>
